<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>日历</title>
    <link rel="stylesheet" href="js/layui-v2.6.8/layui/css/layui.css">
    <link rel="stylesheet" href="css/tdCalendar.css?v=1.0.1">
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/layui-v2.6.8/layui/layui.js"></script>
</head>
<body>
<div class="td-calendar-wrap" id="td-calendar-wrap">
    <div class="td-calendar-area">
        <div class="td-calendar-yearMonth">
            <span class="prev-mouth"><</span>
            <div class="year-month-txt">
                <span class="year">2021年</span>
                <span class="month">09月</span>
            </div>
            <span class="next-mouth">></span>
        </div>
        <div class="td-calendar-content">
            <!--周-->
            <div class="td-calendar-weekList">
                <span class="week-item week-restDay">日</span>
                <span class="week-item">一</span>
                <span class="week-item">二</span>
                <span class="week-item">三</span>
                <span class="week-item">四</span>
                <span class="week-item">五</span>
                <span class="week-item week-restDay">六</span>
            </div>
            <!--日期-->
            <div class="td-calendar-date-list-box">
                <ul class="td-calendar-date-list">
                    <li class="td-calendar-date-item"></li>
                    <li class="td-calendar-date-item"></li>
                    <li class="td-calendar-date-item"></li>
                    <li class="td-calendar-date-item"></li>
                    <li class="td-calendar-date-item">
                        <div class="date-info">
                            <span class="date">01</span>
                            <span class="festival"></span>
                        </div>
                        <ul class="td-calendar-date-content">
                            <li class="remarks-info-item remarks-info-item-normal">
                                <div class="remark-1">
                                    <span class="name">小露露</span>
                                    <span class="state">正常</span>
                                </div>
                                <div class="remark-2">08:00-18:00</div>
                                <div class="remark-operate">
                                    <span class="operate-1"><img src="images/edit-icon.png" alt="编辑" title="编辑"></span>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <li class="td-calendar-date-item">
                        <div class="date-info">
                            <span class="date">02</span>
                            <span class="festival"></span>
                        </div>
                        <ul class="td-calendar-date-content">
                            <li class="remarks-info-item remarks-info-item-annualLeave">
                                <div class="remark-1">
                                    <span class="name">小露露</span>
                                    <span class="state">年假</span>
                                </div>
                                <div class="remark-2">08:00-18:00</div>
                                <div class="remark-operate">
                                    <span class="operate-1"><img src="images/edit-icon.png" alt="编辑" title="编辑"></span>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <li class="td-calendar-date-item td-calendar-date-festival">
                        <div class="date-info">
                            <span class="date">03</span>
                            <span class="date-sign">休</span>
                        </div>
                    </li>
                </ul>
                <ul class="td-calendar-date-list">
                    <li class="td-calendar-date-item td-calendar-date-festival">
                        <div class="date-info">
                            <span class="date">04</span>
                            <span class="date-sign">休</span>
                        </div>
                    </li>
                    <li class="td-calendar-date-item td-calendar-date-festival">
                        <div class="date-info">
                            <span class="date">05</span>
                            <span class="date-sign">中秋节</span>
                        </div>
                    </li>
                    <li class="td-calendar-date-item">
                        <div class="date-info">
                            <span class="date">06</span>
                        </div>
                        <ul class="td-calendar-date-content">
                            <li class="remarks-info-item remarks-info-item-marriageLeave">
                                <div class="remark-1">
                                    <span class="name">小露露</span>
                                    <span class="state">婚假</span>
                                </div>
                                <div class="remark-2">08:00-18:00</div>
                                <div class="remark-operate">
                                    <span class="operate-1"><img src="images/edit-icon.png" alt="编辑" title="编辑"></span>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <li class="td-calendar-date-item">
                        <div class="date-info">
                            <span class="date">07</span>
                        </div>
                        <ul class="td-calendar-date-content">
                            <li class="remarks-info-item remarks-info-item-late">
                                <div class="remark-1">
                                    <span class="name">小露露</span>
                                    <span class="state">迟到</span>
                                </div>
                                <div class="remark-2">08:00-18:00</div>
                                <div class="remark-operate">
                                    <span class="operate-1"><img src="images/edit-icon.png" alt="编辑" title="编辑"></span>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <li class="td-calendar-date-item">
                        <div class="date-info">
                            <span class="date">08</span>
                        </div>
                        <ul class="td-calendar-date-content">
                            <li class="remarks-info-item remarks-info-item-leaveEarly">
                                <div class="remark-1">
                                    <span class="name">小露露</span>
                                    <span  class="state">早退</span>
                                </div>
                                <div class="remark-2">08:00-18:00</div>
                                <div class="remark-operate">
                                    <span class="operate-1"><img src="images/edit-icon.png" alt="编辑" title="编辑"></span>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <li class="td-calendar-date-item td-calendar-date-special">
                        <div class="date-info">
                            <span class="date">09</span>
                            <span class="date-sign">班</span>
                        </div>
                        <ul class="td-calendar-date-content">
                            <li class="remarks-info-item remarks-info-item-overtimeWork">
                                <div class="remark-1">
                                    <span class="name">小露露</span>
                                    <span class="state">加班</span>
                                </div>
                                <div class="remark-2">08:00-18:00</div>
                                <div class="remark-operate">
                                    <span class="operate-1"><img src="images/edit-icon.png" alt="编辑" title="编辑"></span>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <li class="td-calendar-date-item">
                        <div class="date-info">
                            <span class="date">10</span>
                        </div>
                        <ul class="td-calendar-date-content">
                            <li class="remarks-info-item remarks-info-item-normal">
                                <div class="remark-1">
                                    <span class="name">小露露</span>
                                    <span class="state">正常</span>
                                </div>
                                <div class="remark-2">08:00-18:00</div>
                                <div class="remark-operate">
                                    <span class="operate-1"><img src="images/edit-icon.png" alt="编辑" title="编辑"></span>
                                </div>
                            </li>
                        </ul>
                    </li>
                </ul>
                <ul class="td-calendar-date-list">
                    <li class="td-calendar-date-item">
                        <div class="date-info">
                            <span class="date">11</span>
                        </div>
                        <ul class="td-calendar-date-content">
                            <li class="remarks-info-item remarks-info-item-leaveOfAbsence">
                                <div class="remark-1">
                                    <span class="name">小露露</span>
                                    <span class="state">事假</span>
                                </div>
                                <div class="remark-2">08:00-18:00</div>
                                <div class="remark-operate">
                                    <span class="operate-1"><img src="images/edit-icon.png" alt="编辑" title="编辑"></span>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <li class="td-calendar-date-item">
                        <div class="date-info">
                            <span class="date">12</span>
                        </div>
                        <ul class="td-calendar-date-content">
                            <li class="remarks-info-item remarks-info-item-normal">
                                <div class="remark-1">
                                    <span class="name">小露露</span>
                                    <span class="state">正常</span>
                                </div>
                                <div class="remark-2">08:00-18:00</div>
                                <div class="remark-operate">
                                    <span class="operate-1"><img src="images/edit-icon.png" alt="编辑" title="编辑"></span>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <li class="td-calendar-date-item">
                        <div class="date-info">
                            <span class="date">13</span>
                        </div>
                        <ul class="td-calendar-date-content">
                            <li class="remarks-info-item remarks-info-item-normal">
                                <div class="remark-1">
                                    <span class="name">小露露</span>
                                    <span class="state">正常</span>
                                </div>
                                <div class="remark-2">08:00-18:00</div>
                                <div class="remark-operate">
                                    <span class="operate-1"><img src="images/edit-icon.png" alt="编辑" title="编辑"></span>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <li class="td-calendar-date-item">
                        <div class="date-info">
                            <span class="date">14</span>
                        </div>
                        <ul class="td-calendar-date-content">
                            <li class="remarks-info-item remarks-info-item-normal">
                                <div class="remark-1">
                                    <span class="name">小露露</span>
                                    <span class="state">正常</span>
                                </div>
                                <div class="remark-2">08:00-18:00</div>
                                <div class="remark-operate">
                                    <span class="operate-1"><img src="images/edit-icon.png" alt="编辑" title="编辑"></span>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <li class="td-calendar-date-item">
                        <div class="date-info">
                            <span class="date">15</span>
                        </div>
                        <ul class="td-calendar-date-content">
                            <li class="remarks-info-item remarks-info-item-leaveEarly">
                                <div class="remark-1">
                                    <span class="name">小露露</span>
                                    <span class="state">早退</span>
                                </div>
                                <div class="remark-2">08:00-18:00</div>
                                <div class="remark-operate">
                                    <span class="operate-1"><img src="images/edit-icon.png" alt="编辑" title="编辑"></span>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <li class="td-calendar-date-item">
                        <div class="date-info">
                            <span class="date">16</span>
                        </div>
                        <ul class="td-calendar-date-content">
                            <li class="remarks-info-item remarks-info-item-overtimeWork">
                                <div class="remark-1">
                                    <span class="name">小露露</span>
                                    <span class="state">加班</span>
                                </div>
                                <div class="remark-2">08:00-18:00</div>
                                <div class="remark-operate">
                                    <span class="operate-1"><img src="images/edit-icon.png" alt="编辑" title="编辑"></span>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <li class="td-calendar-date-item">
                        <div class="date-info">
                            <span class="date date-today">17</span>
                        </div>
                        <ul class="td-calendar-date-content">
                            <li class="remarks-info-item remarks-info-item-normal">
                                <div class="remark-1">
                                    <span class="name">小露露</span>
                                    <span class="state">正常</span>
                                </div>
                                <div class="remark-2">08:00-18:00</div>
                                <div class="remark-operate">
                                    <span class="operate-1"><img src="images/edit-icon.png" alt="编辑" title="编辑"></span>
                                </div>
                            </li>
                            <li class="remarks-info-item remarks-info-item-annualLeave">
                                <div class="remark-1">
                                    <span class="name">琼林</span>
                                    <span class="state">年假</span>
                                </div>
                                <div class="remark-operate">
                                    <span class="operate-1"><img src="images/edit-icon.png" alt="编辑" title="编辑"></span>
                                </div>
                            </li>
                            <li class="remarks-info-item remarks-info-item-leaveOfAbsence">
                                <div class="remark-1">
                                    <span class="name">琼林</span>
                                    <span class="state">事假</span>
                                </div>
                                <div class="remark-operate">
                                    <span class="operate-1"><img src="images/edit-icon.png" alt="编辑" title="编辑"></span>
                                </div>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
</body>
<script>

    // 用于计算 rem 和 px
    function getRem(pwidth, prem) {
        var html = document.getElementsByTagName("html")[0];
        var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
        html.style.fontSize = oWidth / pwidth * prem + "px";
    }

    $(document).ready(function () {
        //do something
        getRem(750, 100)
    });
    window.onresize = function () {
        getRem(750, 100)
    };
</script>
</html>

